<template>
    <div class="tpml">
        <nav-bar title='图文列表' />
        <div class="photo-box">
            <ul class="photo-title">
                <li @click='loadClick(item.id)' v-for='item in getimgcategory' :key='item.id'>{{item.title}}</li>
            </ul>
        </div>
        <ul class="img-list">
            <li v-for='img in imgList'>
                <router-link :to="{name:'photo.details',query:{ id: img.id}}">
                    <img v-lazy="img.img_url" alt="">
                </router-link>
            </li>
        </ul>

        photo
    </div>
</template>
<script>
    export default {
        data () {
            return {
                getimgcategory: '',
                imgList: ''
            }
        },
        beforeRouteUpdate (to,from,next) {
            this.getCategoryId(to.params.categoryId)
            next();
        },
        created () {
            let categoryId = this.$route.params.categoryId
            this.getCategoryId(categoryId)
            this.$axios.get(process.env.API_HOST + 'getimgcategory')
            .then(res => {
                this.getimgcategory = res.data.message;
                this.getimgcategory.unshift({
                    id: 0,
                    title: "全部"
                })
            })
            .catch(err => console.log(err))
        },
        methods: {
            getCategoryId(categoryId){
                this.$axios.get(process.env.API_HOST + 'getimages/' + categoryId)
                .then(res => {
                    this.imgList = res.data.message
                })
                .catch(err => console.log(err))
            },
            loadClick(categoryId){
                this.$router.push({
                    name: 'photo.list',
                    params: {
                        categoryId: categoryId
                    }
                })
            }
        }
    }
</script>
<style scoped="">
    .photo-box{
        width: 100%;
        height: 20px;
        position: relative;
        overflow: hidden;
    }
    .photo-title{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        height: 40px;
        overflow-y: hidden;
    }
    .photo-title li{
        font-size: 12px;
        color: #000;
        margin-right: 10px;
    }
    .img-list li{
        width: 100%;
        margin-top: 10px;
    }
    .img-list img{
        width: 100%;
    }
    image[lazy=loading] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
</style>